<template>
	<div class="">
		<el-tabs v-model="activeName" class="clin-tabs">
			<el-tab-pane label="系统公告" name="系统公告" >
				<announcement class="tabsRight"></announcement>
			</el-tab-pane>
			<el-tab-pane label="待办事宜" name="待办事宜">
				<todo class="tabsRight"></todo>
			</el-tab-pane>
			<el-tab-pane label="消息提醒" name="消息提醒">
				<message class="tabsRight"></message>
			</el-tab-pane>
			<el-tab-pane label="做账待办报税任务" name="做账待办报税任务">
				<task class="tabsRight"></task>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import announcement from '@/components/home/announcement.vue'
	import todo from '@/components/home/todo.vue'
	import message from '@/components/home/message.vue'
	import task from '@/components/home/task.vue'
	export default{
		components:{
			announcement,
			todo,
			message,
		},
		data(){
			return {
				activeName:'系统公告',
			}
		},		
		created() {
			
		},
		methods:{
			
		},
	}
</script>

<style>	
	.clin-tabs .el-tabs__nav-scroll{
		background-color: #FFF;
	}
	.clin-tabs .el-tabs__item{
		padding: 0;
		margin-right: 30px;
	}
	.clin-tabs .el-tabs__item.is-active {
	    color: var(--el-color-primary);
		background-color: #FFF;
		padding: 0;
		border-right: 0;
	}
	.clin-tabs .el-tabs__content{
		padding: 0;
		margin-top: 20px;
	}
	.tabsRight{
	  animation: fadeInRight 1s 0.02s ease backwards;
	}
</style>